
<template>
  <div>
    <el-button :type="type" :size="size" :icon="icon" @click="showAddDialog">{{title}}</el-button>
    <el-dialog :title="title" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <el-form :model="data" label-width="80px" ref="addForm">
        <el-form-item label="书名" prop="bookId" v-show="openType == 'add'" style="width: 90%">
          <el-select v-model="data.bookId" filterable remote :remote-method="remoteMethodBookSearch"
                     :loading="bookSearchLoading" placeholder="请选择书籍" style="width: 90%">
            <el-option
              v-for="item in bookList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="书名" prop="bookName" v-show="openType != 'add'" style="width: 90%">
          <el-input size="mini" v-model="data.bookName" :disabled="true" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="用户" prop="userId" v-show="openType == 'add'" style="width: 90%">
          <el-select v-model="data.userId" filterable remote :remote-method="remoteMethodUseSearch"
                     :loading="useSearchLoading" placeholder="请选择用户" style="width: 90%">
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.name"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户" prop="userName" v-show="openType != 'add'" style="width: 90%">
          <el-input size="mini" v-model="data.userName" :disabled="true" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="count" style="width: 90%">
          <el-input size="mini" type="number" min="1" v-model="data.count"
                    auto-complete="off" :disabled="openType != 'add'" style="width: 90%"></el-input>
        </el-form-item>

        <el-form-item label="借出时间" prop="borrowTime" style="width: 90%">
          <el-date-picker v-model="data.borrowTime" type="date" placeholder="选择日期"
                          format="yyyy-MM-dd" :disabled="openType!='add'" style="width: 90%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="归还时间" prop="backTime" style="width: 90%">
          <el-date-picker v-model="data.backTime" type="date" placeholder="选择日期"
                          format="yyyy-MM-dd" :disabled="openType!='back'" style="width: 90%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="续借时间" prop="continueTime" style="width: 90%">
          <el-date-picker v-model="data.continueTime" type="date" placeholder="选择日期"
                          format="yyyy-MM-dd" :disabled="openType!='continue'" style="width: 90%">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click.native="addSubmit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import apiBook from '@/api/apiBook';
import api_user from '@/api/api_user';
import apiHistory from '@/api/apiHistory';

export default {
  props: {
    icon: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    call: {
      type: Function,
      default: function () {
      }
    },
    title: {
      type: String,
      default: '编辑'
    },
    openType:{
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      loading: false,
      addFormVisible: false,
      addFormRules: {
        userId: [
          { required: true, message: '请输入用户', trigger: 'blur' }
        ],
        bookId: [
          { required: true, message: '请输入书名', trigger: 'blur' }
        ],
        count: [
          { required: true, message: '请输入数量', trigger: 'blur' }
        ],
      },
      userList: [],
      bookList: [],
      bookSearchLoading: false,
      useSearchLoading: false
    }
  },
  methods: {
    showAddDialog: function () {
      this.addFormVisible = true;
    },
    addSubmit: function () {
      let that = this;
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          that.loading = true;
          let params = Object.assign({}, this.data);
          if (params.id) {
            if(this.openType=='back' && (params.backTime==null || params.backTime=='')){
              that.$message.error({ showClose: true, message: '请填写还书时间', duration: 2000 });
              that.loading = false;
              that.addFormVisible = false;
              return;
            }
            if(this.openType=='continue' && (params.continueTime==null || params.continueTime=='')){
              that.$message.error({ showClose: true, message: '请填写续借时间', duration: 2000 });
              that.loading = false;
              that.addFormVisible = false;
              return;
            }
            apiHistory.updateHistory(params, (result) => {
              that.loading = false;
              if (result && result.code == '0') {
                that.$message.success({ showClose: true, message: '修改成功', duration: 2000 });
                that.$refs['addForm'].resetFields();
                that.addFormVisible = false;
                that.call();
              } else {
                that.$message.error({ showClose: true, message: result.msg, duration: 2000 });
              }
            });
          } else {
            if(params.borrowTime==null || params.borrowTime==''){
              that.$message.error({ showClose: true, message: '请填写借书时间', duration: 2000 });
              that.loading = false;
              that.addFormVisible = false;
              return;
            }
            apiHistory.insertHistory(params, (result) => {
              that.loading = false;
              if (result && result.code == '0' && result.data!=-1) {
                that.$message.success({ showClose: true, message: '新增成功', duration: 2000 });
                that.$refs['addForm'].resetFields();
                that.addFormVisible = false;
                that.call();
              } else {
                that.$message.error({ showClose: true, message: result.msg, duration: 2000 });
              }
            });
          }
        }
      });
    },
    remoteMethodUseSearch(userName) {
      let that = this;
      if (userName !== '') {
        this.useSearchLoading = true;
        let params = {
          name: userName
        };
        api_user.findList(params)
          .then(
            function (result) {
              that.useSearchLoading = false;
              if (result && result.page.rows) {
                that.userList = result.page.rows;
              }
            },
            function (err) {
              that.useSearchLoading = false;
              that.$message.error({
                showClose: true,
                message: err.toString(),
                duration: 2000
              });
            }
          );
      } else {
        that.userList = [];
      }
    },
    remoteMethodBookSearch(bookName) {
      let that = this;
      if (bookName !== '') {
        let params1 = {
          name: bookName
        };
        that.bookSearchLoading = true;
        apiBook.listByPage(params1, (result) => {
          that.bookSearchLoading = false;
          if (result.code == '0') {
            if (result && result.page.list) {
              that.bookList = result.page.list;
            }
          } else {
            that.$message.error({
              showClose: true,
              message: result.msg,
              duration: 2000
            });
          }
        });
      } else {
        that.bookList = [];
      }
    },
  },
  mounted() {
  }
}
</script>
